import { color } from "../config"
import * as THREE from "three"
import vertexShader from "../shaders/cone/vertex.glsl"
import fragmentShader from "../shaders/cone/frag.glsl"
interface coneConfig {
    [key: string]: number | boolean | undefined
}
export class Cone {
    scene: THREE.Scene
    time: THREE.IUniform
    config: coneConfig
    constructor(scene: THREE.Scene, time: THREE.IUniform) {
        this.scene = scene
        this.time = time
        this.config = {
            radius: 25,// — 圆锥底部的半径，默认值为1。
            height: 40,// — 圆锥的高度，默认值为1。
            radialSegments: 4,// — 圆锥侧面周围的分段数，默认为32。
            heightSegments: 1,// — 圆锥侧面沿着其高度的分段数，默认值为1。
            openEnded: false,// — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
            thetaStart: 0,// — 第一个分段的起始角度，默认为0。（three o'clock position）
            thetaLength: Math.PI * 2,//— 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。
        }
        this.init()
    }
    init() {
        let arr = Object.values(this.config)
        const geometry = new THREE.ConeGeometry(...arr)

        const material = new THREE.ShaderMaterial({
            vertexShader,
            fragmentShader,
            uniforms: {
                u_color: {
                    value: new THREE.Color(color.cone)
                },
                u_time: this.time,
                u_height: {
                    value: this.config.radius
                },
                u_opacity: {
                    value: 0.5
                },
                u_speed:{
                    value:30
                }
            },
            transparent: true,
            side: THREE.DoubleSide,
            depthTest: false
        })
        const mesh = new THREE.Mesh(geometry, material)
        mesh.position.y = 100
        mesh.rotation.x = Math.PI
        this.scene.add(mesh)
        
    }
}